<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<meta name="Keywords" content="" />
	<meta name="Description" content="" />
	<meta name="author" content="Kamly">
	<title>栅格化</title>
	<link rel="stylesheet" type="text/css" href="css/normal.css" />
	<link rel="stylesheet" type="text/css" href="css/html5.css" />
	<link rel="stylesheet" type="text/css" href="css/base.css" />
	
	<link rel="stylesheet" type="text/css" href="css/grid.css" />

	<script  src="js/jquery-1.9.0.min.js" type="text/javascript"></script>
	<script src="" type="text/javascript"></script>
</head>
<body>


<!-- 
	.ui-grid-container(固定宽度)和.ui-grid-fluid(100%宽度)用于包裹.ui-row
	.ui-grid-container(固定宽度)通过媒体查询来实现响应式宽度
	.ui-row用于包裹一组.ui-col-1-.ui-col-12列
	xs,sm,lg通过媒体查询来实现响应式
	.ui-col-xs-* 超小屏幕 手机 (<768px)
	.ui-col-sm-* 小屏幕 平板 (≥768px)
	.ui-col-* (默认)中等屏幕 桌面显示器 (≥992px)
	.ui-col-lg-* 大屏幕 大桌面显示器 (≥1200px)
	支持列嵌套，必须包裹在.ui-row行中
	简化代码，不支持列偏移，列排序 

	/*css 验证*/
	[class*="ui-col-"] {
	    background-color: #eee;
	    border: 1px solid #ccc;
	}
-->



	普通
	<div class="ui-grid-container">
		<div class="ui-row">
			<div class="ui-col-8">.ui-col-8</div>
			<div class="ui-col-4">.ui-col-8</div>
		</div>
	</div>










	<br/>
	<br/>
	<br/>
	嵌套
	<div class="ui-grid-container">
		<div class="ui-row">
			<div class="ui-col-8">
				<div class="row">
					<div class="ui-col-6">col-md-6</div>
					<div class="ui-col-6">col-md-6</div>
				</div>
			</div>
			<div class="ui-col-4">.ui-col-8</div>
		</div>
	</div>








<!-- 
我们想让一个网页在手机上显示三行 在平板上显示两行，在桌面上显示一行，则可以设置类为
    ui-col-12  ui-col-sm-6    ui-col-xs-4


	ui-col-xs-*  超小屏幕 手机 (<768px)
    ui-col-sm-*  小屏幕 平板 (≥768px)
    ui-col-*     中等屏幕 桌面显示器 (≥992px)
	ui-col-lg-*  大屏幕 大桌面显示器 (≥1200px)
 -->
 	<br/>
	<br/>
	<br/>
	响应式
	<div class="ui-grid-container">
		<div class="ui-row">
			<div class="ui-col-12  ui-col-sm-6  ui-col-xs-3">123</div>
			<div class="ui-col-12  ui-col-sm-6  ui-col-xs-3">123</div>
			<div class="ui-col-12  ui-col-sm-6  ui-col-xs-3">123</div>
			<div class="ui-col-12  ui-col-sm-6  ui-col-xs-3">123</div>
		</div>
	</div>





</body>
</html>